<script setup>
import { ref, reactive, onMounted, computed, defineAsyncComponent, h } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { eventByIdMessage, eventById, edgeByIdClick, eventnodeuserApi, flowById, eventlogApi, iuserApi, formById, nodeById, eventnodeuserCount } from '@/service/api.ts';
import { downloadFiles, isJSON, isMiniProgram } from '@/utils/utils.ts';
import { showConfirmDialog, showToast, showNotify } from "vant";
import { useConstValue, useLocalValue, useIuserInfoStore, useNodeValue } from '@/store/users.ts';
import { api } from '@/plugins/env-config.ts';
import fileDownload from 'js-file-download';
import dayjs from 'dayjs';
import SheetSvg from '~icons/svg/sheet';
import BtnSvg from '~icons/svg/btn';
import PraiseSvg from '~icons/svg/praise';

const route = useRoute();
const router = useRouter();
const constValue = useConstValue();
const localValue = useLocalValue();
const iuserInfoStore = useIuserInfoStore();
const { info, userSystemInfo } = iuserInfoStore;
const nodeValue = useNodeValue();
const nodeId = ref(null)
const { eventID, tab } = route.query;


const labelMap = [
  '',
  'PropertyAnnounce',
];

const eventRf = ref(null);
const nodeuserRf = ref(null);
const stepInfo = ref([])
const edgeList = ref([]);
const steplist = ref([]);
const typeObj = ref({})
const Rt = reactive({
  currentNode: null,
  edges: [],
  config: [],
  endtime: null,
  form_data: [],
  vote: null,
});
// 节点相关需求配置
const messageRt = reactive({
  need: false,
  checked: true,
  needRole: ''
})
const originStepList = ref([]);
/* 异步加载组件 */
const mapLoading = {
  loadingComponent: {
    template: '<div>加载 A 中...</div>',
  },
  errorComponent: {
    template: '<div>加载失败</div>',
  },
  delay: 200,
  timeout: 5000,
};
const showSteplist = computed(() => {
  if (steplist.value.length) {
    return JSON.parse(JSON.stringify(steplist.value)).reverse()
  }
})

const eventNodeList = computed(() => {
  return stepInfo.value.length ? stepInfo.value.filter((item) => item.properties?.status?.includes('投票中')) : []
})

const endNodeInfo = computed(() => {
  if (Rt.currentNode && Rt.currentNode.type == 'end') {
    return stepInfo.value.find(item => item.id === Rt.currentNode.front_id)
  }
  return null;
})
const stepListInfo = computed(() => {
  if (!stepInfo.value.length) {
    return []
  }
  let topStep = stepInfo.value.filter(item => item.type === 'first')
  let centerStep = stepInfo.value.filter(item => item.type === 'center' && item.text.value !=='公示中')
  let endStep = stepInfo.value.filter(item => item.type === 'end').slice(0, 1)
  return [...topStep, ...centerStep, ...endStep]
})

onMounted(() => {
  initData()
});
const initData = async () => {

  // 获取步骤流程
  const data = await flowById({ method: 'get', id: constValue.flowID });
  if (data?.fron_data?.nodes) {
    stepInfo.value = data?.fron_data?.nodes.sort((a, b) => a.properties.sql_id - b.properties.sql_id)
  } else {
    stepInfo.value = []
  }
  edgeList.value = data?.fron_data?.edges || [];

  //获取最新项目节点
  const event = await eventById({ method: 'get', id: eventID, });
  nodeId.value = event.node;

  //3.获取当前节点详情
  Rt.currentNode = await getNodeDetail();
  //节点详情异常
  if (!Rt.currentNode?.id) {
    console.log('未知故障！');
    return;
  }
  if (isJSON(Rt.currentNode.roles)) {
    Rt.currentNode._roles = JSON.parse(Rt.currentNode.roles);
  }
  //获取项目详情
  getEventDetail(eventID);
}
const getFormDetail = (id) => {
  if (!id) {
    return null;
  }
  return new Promise((resolve, reject) => {
    formById({
      method: 'get',
      id
    }).then(res => {
      console.log('getFormDetail', res);
      resolve(res);
    }).catch(err => {
      resolve(err);
    });
  })
}
const rtConfig = async (event) => {
  let nowEdges = edgeList.value.filter(i => i.sourceNodeId === Rt.currentNode.front_id);
  const form = await getFormDetail(Rt.currentNode.form);
  console.log('form', form);
  if (userSystemInfo.user_identity == '业委会主任') {
    //主任才能使用节点配置功能
    Rt.edges = nowEdges
    Rt.config = form?.id ? JSON.parse(form.config) : [];
    /* 名称默认为项目名称 */
    Rt.config.forEach(item => {
      if (item?.sign === 'name') {
        item.value = event.name;
      } else if (item?.sign === 'identity') {
        messageRt.need = Rt.currentNode.before_node ? false : true;
      }
    });
  }
  if (Rt.currentNode.before_node && isJSON(event.form_data)) {
    //处于投票流程
    const form_data = JSON.parse(event.form_data);
    Rt.endtime = form_data.find(i => i.sign === 'endtime')?.value;
  } else {
    Rt.endtime = null;
  }
  getNowEventNode(form, event)
  getResetStepList()
}
const getNowEventNode = async (form, event) => {
  let endtime = ''
  if (Rt.currentNode.before_node && isJSON(event.form_data)) {
    const form_data = JSON.parse(event.form_data);
    endtime = form_data.find(i => i.sign === 'endtime')?.value;
  }

  if (!form?.id && Rt.currentNode.before_node) {
    //处理投票数据展示
    const userAllCount = await getEventnodeuserCount(); //投票数据统计
    let nodeusers = userAllCount.filter(nodeuser => nodeuser.node === Rt.currentNode.id);
    const nodeuser = { '赞成': 0, '反对': 0 };
    nodeusers.forEach(item => {
      nodeuser[item.mark] = item.count;
    });
    Rt.form_data = [
      {
        label: '投票状态',
        value: dayjs().isBefore(endtime) ? '进行中...' : '已结束',
      },
      {
        label: '赞成',
        value: nodeuser['赞成'] || 0,
      },
      {
        label: '反对',
        value: nodeuser['反对'] || 0,
      }
    ]
  }
}
const getEventDetail = async (id) => {
  const event = await eventById({ method: 'get', id, });
  console.log('event', event);
  if (isJSON(event.request_params)) {
    event._request_params = JSON.parse(event.request_params);
  }
  let _form_data = event.form_data ? JSON.parse(event.form_data) : [];
  event._form_data = _form_data;
  if (_form_data.length) {
    console.log(_form_data);

    _form_data.forEach(item => {
      if (item.label == '参与角色') {
        messageRt.needRole = item.value;
      }
    })
  }
  const signs = _form_data.filter(item => item.sign);
  event._sign = {};
  signs.forEach(item => {
    console.log('item', item.sign, item.value);

    event._sign[item.sign] = item.value;
  });
  nodeuserRf.value = null;
  const nodeusers = await getEventnodeuserList(event);
  console.log('getEventnodeuserList', nodeusers);
  nodeuserRf.value = nodeusers?.length ? nodeusers[0] : { txt: '' };
  eventRf.value = event;
  // 配置rt
  rtConfig(event);
}
const getNodeDetail = () => {
  // 获取当前节点详情
  return new Promise((resolve, reject) => {
    nodeById({
      method: 'get',
      id: nodeId.value,
    }).then(res => {
      resolve(res);
    }).catch(err => {
      resolve(err);
    });
  })
}
const getEventnodeuserCount = () => {
  //获取投票详情
  return new Promise((resolve, reject) => {
    eventnodeuserCount({
      method: 'get',
      params: {
        event: eventID,
      }
    }).then(res => {
      resolve(res || []);
    }).catch(err => {
      resolve([]);
    });
  });
}
const getStepList = () => {
  // 获取项目列表进度
  return new Promise((resolve, reject) => {
    eventlogApi({
      method: 'get',
      params: {
        ordering: 'update_time',
        event: eventID,
      }
    }).then(res => {
      resolve(res?.results || []);
    }).catch(err => {
      resolve([]);
    });
  });
}
const getOptions = (identity) => {
  //获取各个参与人数
  iuserApi({
    method: 'get',
    params: {
      identity,
      pagesize: 1
    }
  }).then(res => {
    console.log('getOptions', res);
    typeObj.value[identity] = res.count
  });
}
const getResetStepList = async () => {
  // 当前步骤列表整合
  console.log('getResetStepList');

  steplist.value = [];
  const res = await Promise.all([getStepList(), getEventnodeuserCount()]);
  const stepList = res[0];
  for (let i = 0; i < stepList.length; i++) {
    const item = stepList[i];
    if (isJSON(item.form_data)) {
      let newFormData = JSON.parse(item.form_data);
      item._form_data = newFormData;
      newFormData.forEach(item => {
        if (item.label === '参与角色') {
          getOptions(item.value)
        }
      });
    } else {
      item._form_data = [];
    }
    const nodeusers = res[1].filter(nodeuser => nodeuser.node === item.node_id);
    const nodeuser = { '赞成': 0, '反对': 0 };
    nodeusers.forEach(item => {
      nodeuser[item.mark] = item.count;
    });
    item._nodeuserCount = [nodeuser];
    let isEvent = eventNodeList.value.findIndex(event => event.properties.sql_id === item.node_id) !== -1;
    item['isEvent'] = isEvent
    steplist.value.push(item);
  }
  if (Rt.currentNode?.id) {
    const nodeusers = res[1].filter(nodeuser => nodeuser.node === Rt.currentNode.id);
    const nodeuser = { '赞成': 0, '反对': 0 };
    nodeusers.forEach(item => {
      nodeuser[item.mark] = item.count;
    });
    if (nodeusers.length) {
      Rt.vote = {
        node_name: Rt.currentNode.label,
        node_id: Rt.currentNode.id,
        data: [nodeuser]
      };
    }
  }
}
const getEventnodeuserList = (event) => {
  // 获取投票用户列表
  return new Promise((resolve, reject) => {
    eventnodeuserApi({
      method: 'get',
      params: {
        event: event.id,
        node: event.node,
        item: localValue.r_id,
      }
    }).then(res => {
      resolve(res?.results || []);
    }).catch(err => {
      reject([]);
    })
  })
}

const handleVote = (vote) => {
  if (canVote.value === 1) {
    showToast('投票已结束！');
    return;
  }
  if (vote === '反对' && !nodeuserRf.value.txt) {
    showToast('请填写反对意见！');
    return;
  }
  showConfirmDialog({
    title: vote,
    message: nodeuserRf.value.txt,
  }).then(() => {
    eventnodeuserApi({
      method: 'post',
      data: {
        event: eventID,
        create_user: localValue.mainUser.user,
        node: eventRf.value.node,
        type: labelMap[tab],
        project: constValue.projectID,
        txt: nodeuserRf.value.txt,
        mark: vote,
        item: localValue.r_id || userSystemInfo.space_name,
        type: userSystemInfo.space_name
      }
    }).then(res => {
      showToast('提交成功！');
      initData();
    });
  }).catch(() => {
    // on cancel
  });
}

const canVote = computed(() => {
  const { endtime } = eventRf.value?._sign || {};
  if (nodeuserRf.value?.mark) {
    return 0;
  }
  if (!endtime) {
    console.log('canVote 没有结束时间');

    return 0;
  }
  if (!messageRt.needRole || messageRt.needRole !== userSystemInfo.user_identity) {
    console.log('身份认证不匹配');
    return 0;
  }
  if (dayjs().isAfter(endtime)) {
    return 1;
  } else {
    return 2;
  }
});

const handleDownFile = (file) => {
  showConfirmDialog({
    title: '下载提示',
    message: `是否下载文件${file.name}`,
  }).then(() => {
    if (isMiniProgram) {
      if (window.webkit?.messageHandlers?.postMessage) {
        /* 向小程序发送下载请求 */
        window.webkit.messageHandlers.postMessage.postMessage({
          action: 'download',
          fileUrl: api + file.url,
        });
      } else if (window.AndroidInterface) {
        /* 向Android发送下载请求 */
        window.AndroidInterface.downloadFile(api + file.url);
      } else if (window.webkit?.messageHandlers?.downloadFileHandler) {
        /* 向ios发送下载请求 */
        window.webkit.messageHandlers.downloadFileHandler.postMessage(api + file.url);
      }
    } else {
      downloadFiles(file.name, file.url);
    }
  }).catch(() => {
    // on cancel
  });
}

const toEventNode = (nodeuser, nodeId, _form_data) => {
  console.log('toEventNode', _form_data);

  let type = messageRt.needRole || _form_data.filter(item => item.label === '参与角色')[0]?.value;
  if (nodeuser.length) {
    nodeValue.typeObj = {
      type,
      typeObj
    };
    nodeValue.nodeuserCount = nodeuser;
    nodeValue.eventID = eventID
    nodeValue.nodeId = nodeId
    router.push({ name: 'eventNode' });
  } else {
    showToast('暂无投票详情！');
  }
}
const formChange = (item, value, showStr) => {
  item.value = value;
  if (showStr) {
    item.showStr = showStr;
  }
}
const EditComponentsMap = {
  input: defineAsyncComponent({
    loader: () => import('./plugin/input.vue'),
    ...mapLoading,
  }),
  datetimePicker: defineAsyncComponent({
    loader: () => import('./plugin/datetimePicker.vue'),
    ...mapLoading,
  }),
  select: defineAsyncComponent({
    loader: () => import('./plugin/select/index.vue'),
    ...mapLoading,
  }),
  uploadImage: defineAsyncComponent({
    loader: () => import('./plugin/uploadImage.vue'),
    ...mapLoading,
  }),
  uploadAttachment: defineAsyncComponent({
    loader: () => import('./plugin/uploadAttachment.vue'),
    ...mapLoading,
  }),
};

const getEditComponent = (item) => {
  return EditComponentsMap[item.UDID] || null;
}

const handleMainNextEdge = (edge_sql_id) => {
  console.log('edge_sql_id', edge_sql_id);

  if (Rt.config.find(item => item.required && !item.value)) {
    showToast('必填项未填写完整！');
    return;
  }

  if (!Rt.currentNode?.before_node) {
    EditStep(edge_sql_id);
    return;
  }
  if (!isJSON(eventRf.value.form_data)) {
    showNotify({ type: 'error', message: `未知故障，请检查流程配置！` });
    return;
  }
  const form_data = JSON.parse(eventRf.value.form_data);
  const endtime = form_data.find(i => i.sign === 'endtime')?.value;


  if (!endtime) {
    ElMessage.error('未知故障，请检查流程配置！');
    return;
  }

  if (dayjs().isAfter(endtime)) {
    EditStep(edge_sql_id);
    return;
  }
  console.log('endtime', form_data, endtime);
  showConfirmDialog({
    title: '提示',
    message: `投票时间尚未结束，您确定要直接进行下一步吗？`,
  }).then(() => {
    EditStep(edge_sql_id);
  }).catch(() => {
    // on cancel
  });
}
const EditStep = (edge_sql_id) => {
  let obj = {};
  let messageFlag = '';
  if (Rt.config) {
    const req = Rt.config.map(i => {
      let tp = {};
      if (i.sign) {
        tp.sign = i.sign;
        if (i.sign === 'identity') {
          messageFlag = i.value;
        }
      }
      if (i.showStr) {
        tp.showStr = i.showStr;
      }
      return { label: i.label, value: i.value, span: i.span, UDID: i.UDID, ...tp }
    });
    obj.form_data = JSON.stringify(req);
  }
  if (messageRt.checked && messageFlag && messageFlag !== '业主') {
    eventByIdMessage({
      method: 'post',
      id: event.id,
      data: {
        identity: messageFlag,
      }
    }).then(res => {
      showNotify({ type: 'success', message: `已发送消息给${messageFlag}` });
    });
  }
  // console.log(
  //   {
  //   method: 'post',
  //   id: edge_sql_id,
  //   data: {
  //     iuser: info.id,
  //     event: eventID,
  //     ...obj,
  //   }
  // }
  // );

  edgeByIdClick({
    method: 'post',
    id: edge_sql_id,
    data: {
      iuser: info.id,
      event: eventID,
      ...obj,
    }
  }).then(res => {
    // handleCancel(true);
    // ElMessage.success('已流转至下一步！');
    showNotify({ type: 'success', message: '状态更新成功' });
    initData()
  }).catch(err => {
    showNotify({ type: 'danger', message: '状态更新失败，请稍后重试' });
    // handleCancel(true);
  });
}

const isChooseNode = (node) => {
  if (!steplist.value.length) {
    return 'step-inactive'
  }
  let includList = steplist.value.filter((item) => item.node_id == node.properties.sql_id)
  if (node.text.value == '开始') {
    return true
  }
  if (eventRf.value.status?.includes('结束') && node.text.value == '结束') {
    return true
  }
  return includList.length ? true : false
}
</script>

<template>
  <div class="content flex-column scroller-aside">
    <div class="content-step content-card" v-if="stepListInfo?.length && steplist?.length">
    <div class="step-status-list">
      <div class="step-status" v-for="item in stepListInfo.slice(0,6)">
        <van-icon v-if="isChooseNode(item)" name="passed" color="#1F89FF" size="20"/>
        <div class="status-name">{{ item?.text?.value }}</div>
      </div>
    </div>
    </div>
    <div class="content-step-list content-card">
      <van-steps direction="vertical" active-color="#1F89FF" inactive-color="#1F89FF">
        <van-step v-if="Rt.currentNode?.type == 'end'">
          <template #active-icon>
            <div class="step-active"></div>
          </template>
          <template #inactive-icon>
            <div class="step-active"></div>
          </template>
          <template #default>
            <div class="step-content">
              <div class="row-title">
                {{ endNodeInfo?.text?.value }}
              </div>
            </div>
          </template>
        </van-step>
        <!-- 待编辑节点信息 / 处理中节点信息 -->
        <van-step v-if="Rt.config?.length || Rt.currentNode?.before_node">
          <template #active-icon>
            <div class="step-active"></div>
          </template>
          <template #inactive-icon>
            <div class="step-inactive"></div>
          </template>
          <template #default>
            <div class="step-content">
              <div class="row-title flex-sb"
                :style="Rt.currentNode?.before_node && messageRt.needRole == userSystemInfo.user_identity ? 'margin-bottom: 0px' : ''">
                <span>{{ Rt.currentNode?.label }}</span>
                <template v-if="Rt.form_data?.length && Rt.vote?.data.length">
                  <span class="row-btn"
                    @click="toEventNode([{ '赞成': Rt.form_data[1].value, '反对': Rt.form_data[2].value }], eventRf.node, showSteplist[0]._form_data)">
                    投票详情
                  </span>
                </template>
              </div>
              <!-- 可编辑中组件 -->
              <div class="row-table">
                <!-- 信息展示区域-投票-且用户不可投票 -->
                <template v-if="Rt.currentNode?.before_node && messageRt.needRole == userSystemInfo.user_identity">
                  <div class="time-row flex" style="margin-bottom: 5px;">
                    <label v-if="nodeuserRf?.id" style="font-size: 12px;color: #666666;">我已投票：{{ nodeuserRf?.mark
                      }}</label>
                    <label v-else style="font-size: 12px;color: #666666;">我还未投票</label>
                  </div>
                </template>
                <!-- 信息展示区域-不能投票-展示用户投票信息 -->
                <template v-if="Rt.currentNode?.before_node && Rt.form_data?.length && canVote !== 2">
                  <div class="time-row flex" v-for="item, index in Rt.form_data">
                    <label class="form-item">{{ item.label }}</label>
                    <div class="row-value flex-column">
                      {{ item.value }}
                    </div>
                  </div>
                </template>
                <!-- 可编辑内容区域 -->
                <template v-if="Rt.config?.length">
                  <div class="time-row flex" v-for="config, configIndex in Rt.config" :key="configIndex">
                    <label class="form-item">{{ config.label }}</label>
                    <div class="row-value flex-column">
                      <component :config="config" :is="getEditComponent(config)"
                        @change="(value, showStr) => formChange(config, value, showStr)" />
                    </div>
                  </div>
                </template>
                <!-- 可编辑-短信配置 -->
                <div class="time-row flex--center" v-if="messageRt.need && !Rt.currentNode.before_node">
                  <label class="form-item">通知方式</label>
                  <div class="row-value flex-column">
                    <el-checkbox v-model="messageRt.checked" label="短信通知" />
                  </div>
                </div>
                <!-- 编辑下面的按钮-非投票 -->
                <div class="time-row flex" v-if="Rt?.edges?.length">
                  <label class="form-item" v-if="Rt.edges.length > 1"></label>
                  <div class="row-value flex-sb">
                    <template v-if="Rt.edges.length > 1" v-for="edge, edgeIndex in Rt.edges" :key="edgeIndex">
                      <el-button :type="edgeIndex ? 'primary' : ''" style="flex:0.8"
                        @click="handleMainNextEdge(edge.properties.sql_id)">
                        {{ edge.text?.value || '下一步' }}
                      </el-button>
                    </template>
                    <template v-if="Rt.edges.length == 1" v-for="edge, edgeIndex in Rt.edges" :key="edgeIndex">
                      <el-button type="primary" style="flex:1" @click="handleMainNextEdge(edge.properties.sql_id)">
                        {{ edge.text?.value || '下一步' }}
                      </el-button>
                    </template>
                  </div>
                </div>
                <!-- 编辑下面的按钮-投票按钮 -->
                <template v-if="canVote == 2 && Rt.form_data?.length && !Rt.vote?.data.length">
                  <div class="time-row flex">
                    <label class="form-item">我的意见</label>
                    <div class="row-value flex-sb" v-if="nodeuserRf.txt !== undefined">
                      <textarea v-model="nodeuserRf.txt" rows="4" placeholder="请先填写意见或建议，然后投票" maxlength="200"
                        style="width: 100%;" />
                    </div>
                  </div>
                  <div class="time-row flex">
                    <label class="form-item"></label>
                    <div class="row-value flex-sb">
                      <el-button type="" @click="handleVote('反对')" style="flex:0.8">
                        反对 {{ Rt.form_data[2].value }}
                      </el-button>
                      <el-button type="primary" @click="handleVote('赞成')" style="flex:0.8">
                        赞成 {{ Rt.form_data[1].value }}
                      </el-button>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </van-step>
        <template v-if="showSteplist?.length">
          <van-step v-for="stepItem, index in showSteplist" :key="index">
            <template #active-icon>
              <div class="step-active"></div>
            </template>
            <template #inactive-icon>
              <div class="step-active"></div>
            </template>
            <template #default>
              <div class="step-content">
                <div class="row-title flex-sb">
                  <span>{{ stepItem?.node_name }}</span>
                  <template v-if="stepItem?.isEvent">
                    <span class="row-btn"
                      @click="toEventNode(stepItem._nodeuserCount, stepItem.node_id, showSteplist[index + 1]._form_data)">
                      投票详情
                    </span>
                  </template>
                </div>
                <!-- 处理审核 -->
                <div class="row-table" v-if="stepItem?.node_id == 69">
                  <div class="time-row flex" v-for="nodes in stepItem._form_data">
                    <label class="form-item">审核结果</label>
                    <div class="row-value flex-column">
                      {{ stepItem?.edge_label }}
                    </div>
                  </div>
                </div>
                <!-- 处理投票 -->
                <div class="row-table" v-if="stepItem?.isEvent">
                  <div class="time-row flex">
                    <label class="form-item">投票状态</label>
                    <div class="row-value flex-column">
                      {{ stepItem?.edge_label }}
                    </div>
                  </div>
                  <div class="time-row flex">
                    <label class="form-item">赞成票</label>
                    <div class="row-value flex-column">
                      {{ stepItem._nodeuserCount[0]['赞成'] }}票
                    </div>
                  </div>
                  <div class="time-row flex">
                    <label class="form-item">反对票</label>
                    <div class="row-value flex-column">
                      {{ stepItem._nodeuserCount[0]['反对'] }}票
                    </div>
                  </div>
                </div>

                <div class="row-table" v-if="stepItem._form_data">
                  <div class="time-row flex" v-for="nodes in stepItem._form_data">
                    <label class="form-item">{{ nodes.label }}</label>
                    <div class="row-value" v-if="nodes.UDID !== 'uploadAttachment'">
                      <span>{{ nodes?.value || '无' }}</span>
                      <span style="color:#a8abb2" v-if="nodes.label === '参与角色' && nodes?.value">&nbsp;&nbsp;({{
                        typeObj[nodes.value]
                      }}人)</span>
                    </div>
                    <div class="flex-column" style="gap: 5px;line-height: 20px;" v-else>
                      <p class="flex--center" v-for="sec in nodes.value" @click="handleDownFile(sec)"
                        style="color:#1F89FF">
                        <van-icon name="link-o" />
                        <span style="margin-left: 5px;">{{ sec.name }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </van-step>
        </template>
        <van-step>
          <template #active-icon>
            <div class="step-active"></div>
          </template>
          <template #inactive-icon>
            <div class="step-active"></div>
          </template>
          <template #default>
            <div class="step-content">
              <div class="row-title">
                基础信息
              </div>
              <div class="row-table">
                <div class="time-row flex">
                  <label class="form-item">创建时间</label>
                  <div class="row-value flex-column">
                    {{ eventRf?.create_time }}
                  </div>
                </div>
                <div class="time-row flex">
                  <label class="form-item">创建人</label>
                  <div class="row-value flex-column">
                    {{ eventRf?.create_user_truename }}
                  </div>
                </div>
                <div class="time-row flex">
                  <label class="form-item">项目名称</label>
                  <div class="row-value flex-column">
                    {{ eventRf?.name }}
                  </div>
                </div>
                <template v-if="eventRf?._request_params">
                  <div class="time-row flex" v-for="item in eventRf._request_params">
                    <label class="form-item">{{ item.label }}</label>
                    <div class="row-value flex-column ellipsis-3" v-if="item.UDID !== 'uploadAttachment'">
                      {{ item.value }}
                    </div>
                    <div class="flex-column" style="gap: 5px;line-height: 20px;" v-else>
                      <p class="flex--center" v-for="sec in item.value" @click="handleDownFile(sec)"
                        style="color:#1F89FF">
                        <van-icon name="link-o" />
                        <span style="margin-left: 5px;">{{ sec.name }}</span>
                      </p>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-step__title) {
  font-size: 12px;
  line-height: 12px;
  color: #333333;
}

:deep(.el-steps) {
  padding-bottom: 20px;
}

.step-content {
  // padding: 8px 0;
}

.step-status-list {
  display: grid;
  grid-template-columns: repeat(6,1fr);
}
.step-status {
  text-align: center;
  .status-name {
    font-size: 12px;
  }
}

.row-btn {
  color: #1F89FF;
  font-size: 14px;
}

.step-active {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: white;
  border: 4px solid #1F89FF;
}

.step-inactive {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: white;
  border: 4px solid #DDDDDD;
}

.content {
  width: 100vw;
  height: 100vh;
  padding: 0 12px;
  overflow: auto;
  background-color: #F7F7F7;
}

.content-card {
  border-radius: 4px;
  background-color: #FFFFFF;
  padding: 12px;
}

.content-step {
  margin: 8px 0;
}

.name-event {
  height: 46px;
  border-bottom: 1px solid #E0E0E0;
  font-weight: 500;
  font-size: 16px;
  color: #000000;

  span {
    margin-left: 5px;
  }
}

.title_vote {
  color: #00B578;
  font-size: 14px;

  svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }

  &.neg {
    color: #FF0000;

    svg {
      transform-origin: center;
      transform: rotate(180deg);
    }
  }
}

label.bord-label {
  margin-top: 12px;
  font-weight: 500;
  font-size: 16px;
  color: #111111;
}

.time-row {
  width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
  font-size: 14px;

  .form-item {
    color: #666666;
    font-size: 14px;
    width: 68px;
    height: 20px;
    line-height: 20px;
    margin-right: 12px;
  }

  .row-value {
    color: #111111;
    line-height: 20px;
    flex: 1;
  }
}

.row-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #111111;
}

p.form-value {
  font-weight: 400;
  font-size: 14px;
  color: #111111;
}

p.form-value {
  margin-top: 8px;
}

textarea {
  padding: 10px;
  background-color: #F3F3F3;
  border: none;
  border-radius: 8px 8px 8px 8px;
  color: #000000;

  &:focus-visible {
    outline: none;
  }
}

.button-container {
  margin-top: 24px;
  position: relative;

  .btn-box {
    position: absolute;
    width: 53%;
    line-height: 0;
    overflow: hidden;

    svg {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-53%, -50%);
      color: white;
      font-size: 14px;

      svg {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }

      &.neg svg {
        transform-origin: center;
        transform: rotate(180deg);
      }
    }
  }

  .btn-box.right {
    position: absolute;
    right: 0;
    width: 53%;

    >svg {
      transform-origin: center;
      transform: rotate(180deg);
    }
  }
}
</style>